<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
// 引入 API
import { getDocumentDetailApi } from '@/api/study/course';
import MindMap from './MindMap2.vue'; // 从本地存储中获取 sourceId
import Note from '../../components/Note.vue';
const props = defineProps({
  courseId: {
    type: String,
    required: true,
  },
  sourceId: {
    type: String,
    required: true,
  },
});

const loading = ref(true);
const introduction = ref<any>(null);
const mindmap = ref<any>(null);

/*
  * 异步获取数据
  * note:这个组件，考虑到后面信息可能会增加，且组件内部耦合性较高，因此直接在组件内部请求处理数据，而不是父组件传递
  */
const fetchData = async (id: string) => {
  if (!id) {
    console.error('No filesource_id found');
    return;
  }

  try {
    const response = await getDocumentDetailApi(id);

    const parsedIntroduction = JSON.parse(response.introduction).introduction;
    const parsedMindmap = JSON.parse(response.mindmap);

    introduction.value = parsedIntroduction;
    mindmap.value = parsedMindmap;
  }
  catch (error) {
    console.error('Error fetching data:', error);
  }
  finally {
    loading.value = false;
  }
};

// 监听 sourceId 的变化
watch(() => props.sourceId, (newId: string) => {
  if (newId) {
    loading.value = true;
    fetchData(newId);
  }
});

// 组件挂载时调用，从 localStorage 获取 sourceId 并请求数据
onMounted(() => {
  if (props.sourceId)
    fetchData(props.sourceId);
  else
    console.error('No sourceId found');
});
</script>

<template>
  <div class="content">
    <a-tabs default-active-key="1" class="tabs">
      <a-tab-pane key="1" tab="导读">
        <div v-if="introduction">
          <h1 class="title">
            {{ introduction.title }}
          </h1>

          <section class="section">
            <h2 class="sectionTitle">
              全文概述
            </h2>
            <p class="text" style="margin-top: 0px">
              {{ introduction.overview }}
            </p>
          </section>

          <section class="section">
            <h2 class="sectionTitle">
              关键要点
            </h2>
            <ul class="list">
              <li v-for="(point, index) in introduction.key_points" :key="index">
                {{ index + 1 }}. {{ point }}
              </li>
            </ul>
          </section>

          <section class="section">
            <h2 class="sectionTitle">
              文档速读
            </h2>
            <div class="readingBox">
              <div v-for="(view, index) in introduction.quick_view" :key="index">
                <h3 class="readingTitle">
                  {{ view.title }}
                </h3>
                <p class="text">
                  {{ view.content }}
                </p>
              </div>
            </div>
          </section>
        </div>
        <p v-else>
          导读内容加载失败...
        </p>
      </a-tab-pane>

      <a-tab-pane key="3" tab="脑图">
        <div v-if="mindmap" @contextmenu.prevent>
          <MindMap :data="mindmap" :read-only="true" /> <!-- 确保脑图为只读模式 -->
        </div>
        <p v-else>
          脑图内容待添加...
        </p>
      </a-tab-pane>
      <a-tab-pane key="4" tab="笔记">
        <Note :source-id="sourceId" :course-id="courseId" resource-type="资源" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<style scoped lang="scss">
.content {
  padding: 20px;
}

.title {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  margin-bottom: 20px;
}

.section {
  margin-bottom: 20px;
}

.sectionTitle {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

.text {
  font-size: 16px;
  line-height: 1.75;
  color: #333;
}

.list {
  padding-left: 20px;
  margin-bottom: 20px;
  list-style-type: none;

  li {
    font-size: 16px;
    line-height: 1.75;
    color: #333;
    margin-bottom: 10px;
  }
}

.readingBox {
  background-color: #eeedff;
  padding: 20px;
  border-radius: 8px;
}

.readingTitle {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.tabs {
  .ant-tabs-nav {
    margin-bottom: 20px; // 调整Tab和内容之间的间距
  }

  .ant-tabs-tab {
    padding: 12px 16px;
    /* 扩大点击区域 */
    margin: 0;
    /* 确保点击区域不会被 margin 影响 */
    text-align: center;
    /* 确保文字居中 */
  }

  .ant-tabs-tab-active {
    font-weight: 600; // 选中的Tab字体加粗
  }
}
</style>
